<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>07_事件处理</title>
</head>
<body>
<!--
1. 绑定监听:
  v-on:xxx="fun"
  @xxx="fun"
  @xxx="fun(参数)"
  默认事件形参: event
  隐含属性对象: $event
2. 事件修饰符（支持多个修饰符级联）:
  .prevent : 阻止事件的默认行为 event.preventDefault()
  .stop : 停止事件冒泡 event.stopPropagation()
  .self : 只当在 event.target 是当前元素自身时触发处理函数
  .capture : 使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
  .once : 只触发一次
  .passive : 表示处理事件函数中不会调用preventDefault函数，就会减少了额外的监听，从而提高了性能；所以不能和.prevent修饰符一同使用，否则浏览器会报错  TODO 没效果
3. 按键修饰符
    .keycode : 操作的是某个keycode值的健，如13表示回车
    .enter : 操作的是enter键
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right
   可以结合系统修饰符使用：.ctrl .alt .shift .meta
   例如 .ctrl.enter 表示同时按下ctrl和回车
-->

<div id="example">

  <h2>1. 绑定监听</h2>
  <button @click="test1">test1</button>
  <button @click="test2('abc')">test2</button>
  <button @click="test3('abcd', $event)">test3</button>

  <h2>2. 事件修饰符</h2>
  <a href="http://www.baidu.com" @click.prevent="test4">@click.prevent 阻止事件默认行为</a>
  <div style="width: 200px;height: 100px;background: red;overflow: scroll" @click="test5" @scroll.passive="test8">
    <div style="width: 100px;height: 200px;background: blue" @click.stop="test6">@click.stop 停止事件冒泡</div>
  </div>

  <h2>3. 按键修饰符</h2>
  @keyup.13 <input type="text" @keyup.13="test7">
  <br/>
  @keyup.ctrl.enter <input type="text" @keyup.ctrl.enter="test7">

</div>

<script type="text/javascript" src="../public/cdn/vue/2.6.10/vue.min.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#example',
    data: {

    },
    methods: {
      test1(event) {
        console.dir(event)
        alert(event.target.innerHTML)
      },
      test2 (msg) {
        alert(msg)
      },
      test3 (msg, event) {
        alert(msg+'---'+event.target.textContent)
      },

      test4 () {
        alert('点击了链接')
      },

      test5 () {
        alert('out')
      },
      test6 () {
        alert('inner')
      },
      test7 (event) {
        console.log(event.keyCode, event.key)
        alert(event.target.value)
      },
      test8 () {
        const time = new Date().getTime();
        while (true) {
          if (time + 2000 < new Date().getTime()) {
            break;
          }
        }
        alert("scroll")
      }
    }
  })
</script>
</body>
</html>